<template>
    <el-container style="height: 750px; border: 1px solid #eee">
        <div id="logo">
            <img src="../assets/logo-AnyEraser.png"
                style="height: 100%; width: 100%; object-fit: contain;background-color: #7FABEE;"></img>
        </div>
        <el-aside width="200px" style="margin-top:77px">
            <!-- 把动态加载菜单提取成vue组件 -->
            <el-menu :default-openeds="[1]" background-color="#3F85ED" text-color="white" :unique-opened="true" router>
                <template v-for="item in mainObj.menus">
                    <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.mid" :key="item.mid">
                        <template #title>
                            <el-icon>
                                <component :is="item.icon"></component>
                            </el-icon>
                            {{ item.mname }}
                        </template>
                        <el-menu-item v-for="child in item.children" :index="child.route" :key="child.mid">
                            <el-icon>
                                <component :is="child.icon"></component>
                            </el-icon>
                            {{ child.mname }}</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item v-else :index="item.mid" :key="item.mid" :route="item.route">
                        <el-icon>
                            <component :is="item.icon"></component>
                        </el-icon>
                        {{ item.mname }}</el-menu-item>
                </template>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header style="text-align: right; font-size: 12px;height: 77px">
                <div class="toolbar">
                    <div class="header-title"
                        style="font-size: 22px;font-weight: bold;color: #ffffff;letter-spacing: 2px;margin-left: 20px;">
                        汽车租赁系统
                    </div>
                    <!-- 右侧用户信息和设置 -->
                    <div style="margin-left: auto;" class="header-right">
                        <el-dropdown>
                            <el-icon style="margin-right: 8px; margin-top: 33px">
                                <setting />
                            </el-icon>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="handleEdit()">编辑个人信息</el-dropdown-item>
                                    <el-dropdown-item @click="logOut()">退出</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        <span>{{ store.userinfo.username }}</span>
                        <el-avatar :size="mainObj.avatar.size" :src="store.userinfo.imgPath" id="userImage"></el-avatar>
                    </div>
                </div>
                <div>
                    <!-- 修改对话框 -->
                    <<el-dialog v-model="dialog.visible" width="380px" :show-close="true" :close-on-click-modal="false"
                        draggable>
                        <!-- 关键：用 header 插槽自己画标题 -->
                        <template #header>
                            <span style="font-size:16px;font-weight:600;margin-right: 120px;">修改用户</span>
                        </template>
                        <!-- 普通表单，不再 inline -->
                        <el-form :model="dialog.user" label-width="70px">
                            <div style="display:flex;">
                                <!-- 左侧：输入框 -->
                                <div style="flex:1;">
                                    <el-form-item label="用户名">
                                        <el-input v-model="dialog.user.username" placeholder="请输入用户名" clearable />
                                    </el-form-item>
                                    <el-form-item label="新密码">
                                        <el-input v-model="dialog.user.password" placeholder="不填写表示不修改" type="password"
                                            clearable />
                                    </el-form-item>
                                </div>

                                <!-- 右侧：头像 -->
                                <div style="width:100px;margin-left:16px;text-align:center;">
                                    <div @click="showUploadImageDialog"
                                        style="width:100px;height:100px;line-height:100px;border:1px dashed #ccc;border-radius:6px;cursor:pointer;">
                                        <el-image v-if="dialog.user.imgPath" :src="dialog.user.imgPath"
                                            style="width:100%;height:100%;" fit="cover" />
                                        <span v-else style="color:#999;font-size:12px;">点击上传</span>
                                    </div>
                                </div>
                            </div>

                            <!-- 按钮 -->
                            <el-form-item style="margin-top:16px;text-align:right;">
                                <el-button type="primary" @click="insertAndUpdateUser">{{ dialog.btnText }}</el-button>
                                <el-button @click="clearFormData">重置</el-button>
                            </el-form-item>
                        </el-form>
                        </el-dialog>
                </div>
                <!-- 上传头像对话框 -->
                <div>
                    <!-- 修改对话框 -->
                    <el-dialog v-model="uploadDialog.visible" title="文件上传" width="30%" draggable>
                        <el-upload :action="uploadDialog.uploadUrl" list-type="picture-card" :file-list="fileList"
                            :limit="uploadDialog.limit" :auto-upload="uploadDialog.autoUpload"
                            :on-change="handlerImage">
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </el-upload>
                        <!-- 添加上传按钮 -->
                        <el-form-item style="margin-top: 10px;margin-left: 320px;">
                            <el-button type="primary" @click="uploadHandler()">上传</el-button>
                        </el-form-item>
                    </el-dialog>
                </div>
            </el-header>
            <el-main style="background-color: #FFFFFF;">
                <router-view />
            </el-main>
        </el-container>
    </el-container>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import request from '../utils/request';
import { reactive, ref, onMounted, nextTick } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
import MainFrameApi from '../api/MainFrameApi';
//引入useCounterStore实例
import { useUserStore } from '../stores/userStore'
//创建stote实例
let store = useUserStore();

//绑定登录用户信息
var mainObj = reactive({
    menus: [], //存放后端查询菜单数据
    avatar: {
        size: 40, //设置登录用户头像大小
    }
});
//发送同步请求
onMounted(async () => {
    // 有 token 再拉，没有就什么都不做（或给提示）
    if (!store.token) return;
    //发送请求查询菜单
    let res = await MainFrameApi.getMenu(store.userinfo.uid);
    if (res.data.success) {
        mainObj.menus = res.data.data;
        /* 关键：等 DOM 更新完再赋值 */
        await nextTick()
        router.push('/CarView')
    }
})
//定义变量控制文件上传
const uploadDialog = reactive({
    visible: false, //隐藏对话框
    uploadUrl: "",
    fileList: [], //保存所有上传文件集合
    limit: 1,//控制文件上传个数
    autoUpload: false,
    uploadFile: null,
})
//选中文件时触发函数
const handlerImage = (file) => {
    uploadDialog.uploadFile = file.raw;
}
//显示文件上传对话框
const showUploadImageDialog = () => {
    uploadDialog.visible = true;
}
//实现文件上传函数
const uploadHandler = async () => {
    //文件上传详细步骤
    //1.创建FormData对象
    let formData = new FormData();
    //2.设置上传对象对象
    formData.append("file", uploadDialog.uploadFile)
    //3.设置上传类型
    let contentType = { "ContentType": "multipart/form-data" }
    formData.append("headers", contentType);
    //4.发送请求实现文件上传
    let res = await request.post("/user/fileUpload", formData);
    // console.log(res.data);
    if (res.data.success) {
        //把上传文件保存到表单imgPath中
        dialog.value.user.imgPath = res.data.data; //http://localhost:80/xxxx.png
        
        //显示提示信息
        ElMessage.success("上传成功");
        //关闭文件上传对话框
        uploadDialog.visible = false;
    }
}
//定义对话框属性
let dialog = ref({
    visible: false,
    title: '',
    btnText: '',
    user: {
        uid: '',
        username: '',
        imgPath: '',
        password: '',
    }
})
//显示修改用户对话框
const handleEdit = () => {
    //显示表单信息
    dialog.value.user = store.userinfo;
    dialog.value.user.password = '';
    //设置对话框标题
    dialog.value.title = "修改用户";
    //设置按钮文本内容
    dialog.value.btnText = "更新数据";
    //显示对话框
    dialog.value.visible = true;
}
//实现用户修改操作
const insertAndUpdateUser = async () => {
    dialog.value.user.uid = store.userinfo.uid;
    // console.log(dialog.value.user); //查询是否有值
    let res = await request.put("/user/update", dialog.value.user);
    //判断新增成功
    if (res.data.success) {
        //1,修改显示信息
        store.userinfo.imgPath = dialog.value.user.imgPath;
        store.userinfo.password = dialog.value.user.password;
        store.userinfo.username = dialog.value.user.username;
        //3.显示提示信息
        ElMessage.success("修改成功")
        //4.关闭对话框
        dialog.value.visible = false;
    }
}
//重置修改个人信息选项
const clearFormData = () => {
    dialog.value.user = store.userinfo;
}
//退出登录
const logOut = () => {
    store.LogOut();
    router.push('/');
}

</script>

<style>
.el-header {
    background-color: #3F85ED;
    color: #333;
    line-height: 77px;
}

.el-aside {
    color: #333;
    background-color: #3F85ED;
}

.transition-box {
    margin-bottom: 10px;
    width: 800px;
    height: 500px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
    position: relative;
    top: 20px;

}

#logo {
    background-color: red;
    width: 200px;
    height: 77px;
    position: absolute;
    background-color: rgb(36, 51, 70);
    color: white;
    font-size: 20px;
    text-align: center;
    line-height: 77px;
    letter-spacing: 6px;

}

#userImage {
    margin-left: 5px;
    vertical-align: middle;
}

/* 让 toolbar 成为 flex 容器，左右分布 */
.toolbar {
    display: flex;
    align-items: center;
    height: 100%;
}
</style>